<template>
  <afl-loading v-if="!ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">Loading...
  </afl-loading>
  <ScaleBox :width="1920" id="dv-full-screen-container"
            :height="1080"
            bgc="transparent"
            :delay="100" v-else>
    <!--<div id="dv-full-screen-container" style="width: 100%;height: 100%;" v-else>-->
    <div class="top-container">
      <el-row :gutter="15">
        <el-col :span="8">
          <el-collapse-transition>
            <lvtFeedingTotalCard :totalData="lvtInfo.total" :title="$t('wms.lvtSummaryData')"></lvtFeedingTotalCard>
          </el-collapse-transition>
        </el-col>
        <el-col :span="8">
          <div class="list-wrapper">
            <lvt-feeding-charts :data="lvtInfo.chartData"></lvt-feeding-charts>
            <lvt-feeding-feed-list :data="lvtInfo.finishedData"></lvt-feeding-feed-list>
          </div>
        </el-col>
        <el-col :span="8">
          <lvt-feeding-rank-list :rankList="lvtInfo.rankList"></lvt-feeding-rank-list>
        </el-col>
      </el-row>
    </div>
    <div class="bottom-container">
      <lvt-feeding-dg :dgData="lvtFeedingDgData" :loading="lvtFeedingDgLoading"></lvt-feeding-dg>
    </div>
    <!--</div>-->
  </ScaleBox>
</template>

<script>
import { LVTFeedingData } from './LVTFeedingData'
import loading from '@/components/loading'
import LvtFeedingDg from '@/components/mes/lvtFeeding/LvtFeedingDg'
import lvtFeedingTotalCard from '@/components/mes/lvtFeeding/TotalCard'
import lvtFeedingCharts from '@/components/mes/lvtFeeding/LvtFeedingCharts'
import lvtFeedingFeedList from '@/components/mes/lvtFeeding/lvtFeedingFeedList'
import lvtFeedingRankList from '@/components/mes/lvtFeeding/lvtFeedingRankList'
import i18n from '@/hooks/language'
import ScaleBox from 'vue3-scale-box'
import { computed, reactive, watch, watchEffect } from 'vue'

export default {
  components: {
    LvtFeedingDg,
    aflLoading: loading,
    lvtFeedingTotalCard,
    ScaleBox,
    lvtFeedingCharts,
    lvtFeedingFeedList,
    lvtFeedingRankList
  },
  setup () {
    i18n()
    const { ready, lvtFeedingDgData, lvtInfo, lvtFeedingDgLoading } = LVTFeedingData(null, { once: false })
    return { ready, lvtFeedingDgData, lvtInfo, lvtFeedingDgLoading }
  }
}

</script>

<style scoped lang="scss">
body {
  background-color: rgb(237, 242, 249);
}

#dv-full-screen-container {
  background: rgb(237, 242, 249);
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;

  .top-container {
    flex: 0 0 auto;
    padding-bottom: 20px;

    .list-wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .bottom-container {
    flex: 1 1 auto;
    overflow: auto;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  }
}

</style>
